<script setup>
import OImage from "../setting/Images.vue";
import { newRandomUid } from "@/utils";

const props = defineProps({
  config: {
    type: Object,
    required: true,
  },
  name: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

const emits = defineEmits(["update:config", "change"]),
  pageConfig = inject("pageConfig", []);

const form = ref({
  $position: { top: 0, left: 15 },
  $size: { width: 345, height: 91 },
  $positionType: "relative",
  $removeable: true,
  bg: "./imagesStatic/activity/goods_bg.png",
  btnImg: "./imagesStatic/activity/goods_btn.png",
  btnPosition: { top: 22, left: 241 },
  btnSize: { width: 90, height: 45 },
});

const formRef = ref();

const detail = computed({
  get: () => {
    return Object.assign({}, form.value, props.config);
  },
  set: (val) => {
    emits("update:config", val);
    emits("change", val);
  },
});

const initConfig = () => {
  if (!detail.value.$pageFlag) {
    detail.value.$pageFlag = `Goods-${newRandomUid()}`;
  }
};

const onChange = (val) => {
  detail.value = detail.value;
};

onMounted(() => {
  nextTick(() => {
    initConfig();
    onChange();
  });
});
</script>
<template>
  <el-form :model="detail" :disabled="disabled" label-width="auto">
    <OImage
      v-model="detail.bg"
      v-model:size="detail.$size"
      name="背景图片"
      @change="onChange"
    />
    <OImage
      v-model="detail.btnImg"
      v-model:size="detail.btnSize"
      name="购买按钮"
      @change="onChange"
    />
  </el-form>
</template>
